<template>
  <div style="width: 100%;height: 100%">
    <van-nav-bar style="background-color: #73b9ff;position:fixed;z-index:100;height:3rem;width: 100%;top: 0" left-arrow>
      <template #left>
        <el-avatar
          src="required('src/assets/logo.png')">
        </el-avatar>
      </template>
      <template #right>
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          placement="bottom-end"
        >
          <template #reference>
            <van-icon name="plus" size="18"/>
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <div class="chat_list_box">
      <van-search
        v-model="searchValue"
        shape="round"
        placeholder="请输入搜索关键词"
      />

      <van-tabs v-model="active" style="margin-top: 1rem">
<!--        <van-tab title="好友">-->
<!--          <van-index-bar>-->
<!--            <van-cell-group>-->
<!--            <van-index-anchor index="A" />-->
<!--            <van-cell title="文本" >-->
<!--              <div class="van-cell__value">-->

<!--              </div>-->
<!--            </van-cell>-->
<!--            <van-cell title="文本" />-->
<!--            <van-cell title="文本" />-->

<!--            <van-index-anchor index="B" />-->
<!--            <van-cell title="文本" />-->
<!--            <van-cell title="文本" />-->
<!--            <van-cell title="文本" />-->
<!--            </van-cell-group>-->
<!--          </van-index-bar>-->
<!--        </van-tab>-->
        <van-tab title="好友">
          <van-cell-group>
            <van-cell v-for="(user,key) in friendsList" style="position: relative" :key="key"   label="描述信息" >
              <div slot="title">
                <el-avatar
                  style="position: absolute;left: 1rem"
                  :src="$store.getters.getAvatarBaseUrl+user.avatarPath">
                </el-avatar>
                <span>{{user.userName}}</span>
              </div>
              <div class="van-cell__value">

              </div>

            </van-cell>
          </van-cell-group>
        </van-tab>
        <van-tab title="群聊">          <van-cell-group>
          <van-cell style="position: relative"   label="描述信息" >
            <div slot="title">
              <el-avatar
                style="position: absolute;left: 1rem"
                src="required('src/assets/logo.png')">
              </el-avatar>
              <span>群聊1</span>
            </div>
            <div class="van-cell__value">

            </div>

          </van-cell>
        </van-cell-group>
        </van-tab>
      </van-tabs>
      <el-button @click="addFriends({userName:'12sqw'})">test</el-button>
    </div>
  </div>
</template>

<script>
  import { IndexBar, IndexAnchor } from 'vant';
  import {mapGetters, mapMutations} from "vuex";
    export default {

        name: "ContactView",
      data() {
        return {
          active: 0,
          searchValue:'',
          icon: {
            active: 'https://img01.yzcdn.cn/vant/user-active.png',
            inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
          },
          showPopover: false,
          // 通过 actions 属性来定义菜单选项
          actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
        };
      },
      methods: {
        onSelect(action) {
          console.log(action.text);
        },
        ...mapMutations([

          // `mapMutations` 也支持载荷：
          'addFriends' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
        ]),
      },
      computed: {
        // 使用对象展开运算符将 getter 混入 computed 对象中
        ...mapGetters({
          // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
          friendsList: 'getFriends'
        })
      }
    }
</script>

<style scoped>
  .chat_list_box{
    width: 100%;
    margin-top: 3rem;
  }
</style>
